<template>
	<div class="page">
		<img src="../../img/img2.jpg" style="width: 100%; height: 750px;" />
		<div class="login">
			<div class="loginbody">
				<form>
					<div class="title" style="padding-bottom: 4px;">用户登录</div>
					<div>
						用户名：
						<el-input placeholder="请输入用户名" v-model="error.username" clearable class="input_style">
						</el-input>
						<span class="err-msg"></span>
					</div>
					<div>
						密码 ：
						<el-input placeholder="请输入密码" v-model="error.password" show-password class="input_style">
						</el-input>
						<span class="err-msg"></span>
					</div>
					<div>
						<el-button type="primary" @click="login" class="login_style"
							style="font-weight: 700; font-size: 18px;">登录</el-button>
					</div>
				</form>
			</div>
		</div>


	</div>
</template>

<script>
	import {
		mapMutations
	} from 'vuex'
	export default {
		name: "Login",
		data() {
			return {
				error: {
					username: '',
					password: ''
				}
			}
		},
		methods: {
			...mapMutations(['setToken']),
			login: function() {
				this.axios.post('/account/token', response => {
					console.log(response)
					// 登录成功后 转到一个成功页面
					if (response.code == 200) {
						this.axios.setToken(response.obj);
						this.setToken(response.obj)
						this.$router.push({
							path: '/'
						})
					} else {
						this.$message.error('用户名或者密码错误');
					}
				}, this.error)
			}
		}
	};
</script>

<style>
	body {
		padding: 0;
		margin: 0;
	}

	.page {
		position: relative;
	}

	.title {
		text-align: center;
		font-size: 36px;
		font-weight: 600;

	}

	.login {
		position: absolute;
		top: 300px;
		left: 500px;
		text-align: center;
		width: 500px;
	}

	.login .loginbody {
		width: 90%;
		height: 250px;
		margin: 0px auto;
		padding-top: 40px;
		color: black;
		background-color: aliceblue;
		border: 1px solid skyblue;
		border-radius: 10px;
		box-shadow: 3px 5px 4px cadetblue;
	}

	.last {
		flex: 1;
	}

	.input_style {
		width: 200px;
		margin-bottom: 10px;
	}

	.login_style {
		width: 200px;
	}
</style>
